<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css盒子模型</title>
</head>
<body>
    <div class="box">
        这是百分比宽高演示
    </div>
</body>
<style type="text/css">
    .box {
        width: 50%;  /* 设置内容区宽度为父元素宽度的50% */
        height: 50%; /* 设置内容区高度为父元素高度的50% */
        background-color: #02ff23; /* 设置内容区背景颜色 */
        overflow: hidden; /* 设置内容溢出时显示滚动条 */
    }
    html,body{
        height: 100%;
    }
</style>
</html>
